<template>
    <div class="ParticleSystemWeather">
        <cesium-viewer @viewerAlready="viewerAlready">
        </cesium-viewer>
        <div class="selectOption">
            <label>
                <el-radio-group v-model="value" @change="change">
                    <el-radio label="Rain">雨</el-radio>
                    <el-radio label="Snow">雪</el-radio>
                </el-radio-group>
            </label>
        </div>
    </div>
</template>

<script>
    import CesiumViewer from "../../CesiumViewer";

    const snowImage = require("../../../assets/SampleData/snowflake_particle.png");
    const rainImage = require("../../../assets/SampleData/circular_particle.png");
    export default {
        name: "ParticleSystemWeather",
        //import引入的组件需要注入到对象中才能使用",
        components: {CesiumViewer},
        data() {
            //这里存放数据",
            return {
                options: [{
                    value: 'Rain',
                    label: '雨'
                }, {
                    value: 'Snow',
                    label: '雪'
                }],
                value: ''
            };
        },
        //监听属性 类似于data概念",
        computed: {},
        //监控data中的数据变化",
        watch: {},
        //方法集合",
        methods: {
            viewerAlready() {
                viewer.clock.shouldAnimate=true;
                viewer.scene.globe.depthTestAgainstTerrain = true;
                this.SetView();
                this.WeatherAdd();
            },
            SetView() {
                let scene = viewer.scene;
                scene.camera.setView({
                    destination: new Cesium.Cartesian3(
                        277096.634865404,
                        5647834.481964232,
                        2985563.7039122293
                    ),
                    orientation: {
                        heading: 4.731089976107251,
                        pitch: -0.32003481981370063,
                    },
                });

            },
            WeatherAdd() {
                let scene = viewer.scene;
                let snowSystem;
                // snow
                let snowParticleSize = 12.0;
                let snowRadius = 100000.0;
                let minimumSnowImageSize = new Cesium.Cartesian2(
                    snowParticleSize,
                    snowParticleSize
                );
                let maximumSnowImageSize = new Cesium.Cartesian2(
                    snowParticleSize * 2.0,
                    snowParticleSize * 2.0
                );

                let snowGravityScratch = new Cesium.Cartesian3();
                let snowUpdate = function (particle) {
                    snowGravityScratch = Cesium.Cartesian3.normalize(
                        particle.position,
                        snowGravityScratch
                    );
                    Cesium.Cartesian3.multiplyByScalar(
                        snowGravityScratch,
                        Cesium.Math.randomBetween(-30.0, -300.0),
                        snowGravityScratch
                    );
                    particle.velocity = Cesium.Cartesian3.add(
                        particle.velocity,
                        snowGravityScratch,
                        particle.velocity
                    );

                    let distance = Cesium.Cartesian3.distance(
                        scene.camera.position,
                        particle.position
                    );
                    if (distance > snowRadius) {
                        particle.endColor.alpha = 0.0;
                    } else {
                        particle.endColor.alpha =
                            snowSystem.endColor.alpha / (distance / snowRadius + 0.1);
                    }
                };

                snowSystem = new Cesium.ParticleSystem({
                    modelMatrix: new Cesium.Matrix4.fromTranslation(
                        scene.camera.position
                    ),
                    minimumSpeed: -1.0,
                    maximumSpeed: 0.0,
                    lifetime: 15.0,
                    emitter: new Cesium.SphereEmitter(snowRadius),
                    startScale: 0.5,
                    endScale: 1.0,
                    image: snowImage,
                    emissionRate: 1500.0, //每秒要发射的粒子数
                    startColor: Cesium.Color.WHITE.withAlpha(0.0),
                    endColor: Cesium.Color.WHITE.withAlpha(1.0),
                    minimumImageSize: minimumSnowImageSize,
                    maximumImageSize: maximumSnowImageSize,
                    updateCallback: snowUpdate,
                });
                scene.primitives.add(snowSystem);
                snowSystem.show=false;
                // rain
                let rainParticleSize = 15.0;
                let rainRadius = 100000.0;
                let rainImageSize = new Cesium.Cartesian2(
                    rainParticleSize,
                    rainParticleSize * 2.0
                );

                let rainSystem;

                let rainGravityScratch = new Cesium.Cartesian3();
                let rainUpdate = function (particle) {
                    rainGravityScratch = Cesium.Cartesian3.normalize(
                        particle.position,
                        rainGravityScratch
                    );
                    rainGravityScratch = Cesium.Cartesian3.multiplyByScalar(
                        rainGravityScratch,
                        -1050.0,
                        rainGravityScratch
                    );

                    particle.position = Cesium.Cartesian3.add(
                        particle.position,
                        rainGravityScratch,
                        particle.position
                    );

                    let distance = Cesium.Cartesian3.distance(
                        scene.camera.position,
                        particle.position
                    );
                    if (distance > rainRadius) {
                        particle.endColor.alpha = 0.0;
                    } else {
                        particle.endColor.alpha =
                            rainSystem.endColor.alpha / (distance / rainRadius + 0.1);
                    }
                };

                rainSystem = new Cesium.ParticleSystem({
                    modelMatrix: new Cesium.Matrix4.fromTranslation(
                        scene.camera.position
                    ),
                    speed: -1.0,
                    lifetime: 15.0,
                    emitter: new Cesium.SphereEmitter(rainRadius),
                    startScale: 1.0,
                    endScale: 0.0,
                    image: rainImage,
                    emissionRate: 4900.0,
                    startColor: new Cesium.Color(0.27, 0.5, 0.7, 0.0),
                    endColor: new Cesium.Color(0.27, 0.5, 0.7, 0.98),
                    imageSize: rainImageSize,
                    updateCallback: rainUpdate,
                });
                scene.primitives.add(rainSystem);
                rainSystem.show=false;
            },
            change(type){
                let scene = viewer.scene;
                function snow() {
                    scene.skyAtmosphere.hueShift = -0.8;
                    scene.skyAtmosphere.saturationShift = -0.7;
                    scene.skyAtmosphere.brightnessShift = -0.33;
                    scene.fog.density = 0.001;
                    scene.fog.minimumBrightness = 0.8;
                    scene.primitives._primitives[0].show=true;
                    scene.primitives._primitives[1].show=false;

                }
                function rain() {
                    scene.skyAtmosphere.hueShift = -0.97;
                    scene.skyAtmosphere.saturationShift = 0.25;
                    scene.skyAtmosphere.brightnessShift = -0.4;
                    scene.fog.density = 0.00025;
                    scene.fog.minimumBrightness = 0.01;
                    scene.primitives._primitives[0].show=false;
                    scene.primitives._primitives[1].show=true;
                }
                switch (type) {
                    case "Snow": snow();break;
                    case "Rain":rain();break;

                }
            }
        },
        //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
        beforeCreate() {
        },

        //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
        created() {

        },
        //生命周期 - 挂载之前",html模板未渲染
        beforeMount() {

        },

        //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
        mounted() {

        },

        //生命周期 - 更新之前",数据模型已更新,html模板未更新
        beforeUpdate() {

        },
        //生命周期 - 更新之后",数据模型已更新,html模板已更新
        updated() {

        },
        //生命周期 - 销毁之前",
        beforeDestroy() {

        },
        destroyed() {

        },
        //生命周期 - 销毁完成",
        //如果页面有keep-alive缓存功能，这个函数会触发",
        activated() {

        },
    }

</script>

<style scoped>
    .ParticleSystemWeather {
        position: relative;
    }

    .selectOption {
        position: absolute;
        z-index: 1001;
        top: 5px;
        left: 5px;
        padding: 20px;
        background-color: rgb(225,225,225);
    }
</style>

